<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45" />
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column label="名称" width="250">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <el-avatar :size="60" :src="scope.row.img_show" shape="square" />
            <div class="name-desc">
              <p class="d-flex">
                <el-input
                  v-model="scope.row.name"
                  :disabled="true"
                  class="input_a"
                  @blur="handleBlur(scope, 'input_a')"
                />
                <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_a')" />
              </p>
              <p>货号：{{ scope.row.item_no }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="kind_name" label="分类" width="170" />
      <el-table-column label="价格" width="180">
        <template slot-scope="scope">
          <div>
            <p class="d-flex">
              <span class="no-wrap">原价：￥</span>
              <el-input
                v-model="scope.row.original_price"
                class="input_b"
                :disabled="true"
                @blur="handleBlur(scope, 'input_b')"
              />
              <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_b')" />
            </p>
            <p class="d-flex">
              <span class="no-wrap">市价：￥</span>
              <el-input
                v-model="scope.row.price"
                :disabled="true"
                class="input_c"
                @blur="handleBlur(scope, 'input_c')"
              />
              <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_c')" />
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="inventory" label="库存" />
      <el-table-column prop="sold_out" label="总销量" />
      <el-table-column prop="sort" label="排序">
        <template slot-scope="scope">
          <div class="d-flex">
            <el-input
              v-model="scope.row.sort"
              :disabled="true"
              class="w-60 input_d"
              @blur="handleBlur(scope, 'input_d')"
            />
            <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_d')" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <div>
            <span class="mr">是否上架</span>
            <el-switch v-model="scope.row.is_putaway" @change="switchChange(scope)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <div>
            <span class="color-b mr cursor-p" @click="edit(scope)">编辑</span>
            <span class="color-r cursor-p" @click="deleteItem(scope)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { editGoodsItem, deleteGoodsItem } from '@/api/goods'
const ERR_OK = 200
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    edit(scope) {
      this.$emit('edit')
      this.$store.dispatch('goodsId/setGoodsId', scope.row.id)
      this.$store.dispatch('goodsId/setEditType', true)
    },
    deleteItem(scope) {
      this._deleteGoodsItem(scope.row.id)
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    iconClick(index, name) {
      const el = document.querySelectorAll(`.${name}`)[index].children[0]
      el.style.background = '#eeee'
      el.removeAttribute('disabled')
      el.focus()
    },
    handleBlur(scope, name) {
      const index = scope.$index
      const row = scope.row
      const el = document.querySelectorAll(`.${name}`)[index].children[0]
      el.style.background = 'transparent'
      el.setAttribute('disabled', 'disabled')
      switch (name) {
        case 'input_a':
          this._editGoodsItem({ id: row.id, name: row.name })
          break
        case 'input_b':
          this._editGoodsItem({ id: row.id, original_price: row.original_price })
          break
        case 'input_c':
          this._editGoodsItem({ id: row.id, price: row.price })
          break
        case 'input_d':
          this._editGoodsItem({ id: row.id, sort: row.sort })
          break
      }
    },
    switchChange(scope) {
      this.$emit('switchChange', scope)
      const row = JSON.parse(JSON.stringify(scope.row))
      row.is_putaway = row.is_putaway ? 1 : 0
      this._editGoodsItem({ id: row.id, is_putaway: row.is_putaway })
    },
    _editGoodsItem({ id, name, is_putaway, price, original_price, sort }) {
      editGoodsItem({ id, name, is_putaway, price, original_price, sort })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this._success(res)
          }
        })
        .catch(err => {
          console.log(err)
          this._warning(err)
        })
    },
    _deleteGoodsItem(id) {
      return deleteGoodsItem(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this._success(res)
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _success(res) {
      this.$message({
        showClose: true,
        message: res.message,
        type: 'success'
      })
    },
    _warning(res) {
      this.$message({
        message: res.message,
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.name-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  .name-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    p {
      white-space: nowrap;
      margin: 0;
    }
  }
}
.name-wrapper .name-desc p {
  display: inline-block;
}
.el-input {
  display: inline-block;
}
.el-input /deep/ .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  color: #666666;
  border: none;
  height: auto;
  line-height: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.input_a{
  width: 70% !important;
}
.el-avatar {
  margin-right: 10px;
  border: 1px solid #eee;
}
.mr {
  margin-right: 10px;
}
.color-b {
  color: #409eff;
}
.color-r {
  color: #f56c6c;
}
.cursor-p {
  cursor: pointer;
}
.d-flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.no-wrap {
  white-space: nowrap;
}
.w-60 {
  width: 40px;
}
.fs {
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
  opacity: 0;
  transform: all 2s;
}
.el-table /deep/ .el-table__row:hover {
  .fs {
    opacity: 1;
  }
}
</style>
